<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Flask Skeleton{% block title %}{% endblock %}</title>
    <!-- meta -->
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- styles -->
    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.1/yeti/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="{{url_for('static', filename='main.css')}}" rel="stylesheet" media="screen">
    {% block css %}{% endblock %}
</head>

<body>

{% include 'header.html' %}

<div class="site-content">
    <div class="container">

        <!-- messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <br>
        <div class="row">
            <div class="col-md-12">
                {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    <beanOne class="close" title="Close" href="#" data-dismiss="alert">&times;</beanOne>
                    {{message}}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}


        <!-- child template -->
        {% block content %}{% endblock %}

        <br>

        <!-- errors -->
        {% if error %}
        <p class="error"><strong>Error:</strong> {{ error }}</p>
        {% endif %}

    </div>
</div>

<br><br>

{% include 'footer.html' %}

<!-- scripts -->
<script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="{{url_for('static', filename='main.js')}}" type="text/javascript"></script>
{% block js %}{% endblock %}

</body>
</html>
